<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10">采购管理 / 采购单列表 / 上传支付凭证</p>
      <div class="content">
        <el-form :ref="form" :rules="relus" :model="form" label-width="170px">
          <div class="basicInfo">上传支付凭证</div>
          <el-form-item class="list" label="收款方:">
            北京海科融通支付服务股份有限公司
          </el-form-item>
          <el-form-item label="收款账户:">20000004295500000173102</el-form-item>
          <el-form-item
            label="打款人姓名:"
            prop="payerName"
            style="margin-bottom: 20px"
          >
            <el-input
              v-model="form.payerName"
              placeholder="请输入打款人姓名"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="打款人机构电话:"
            prop="payerPhone"
            style="margin-bottom: 20px"
          >
            <el-input
              v-model="form.payerPhone"
              maxlength="11"
              @input="value=>{form.payerPhone=value.replace(/[^\d]/g,'')}"
              placeholder="请输入打款人电话号码"
            ></el-input>
          </el-form-item>
          <div class="imges" style="float: left; margin-left: 40px">
            <p>
              <span style="color: red">*</span>
              上传支付凭证截图：(只支持jpg/png图片格式，且文件大小不超过500kb，最多上传5张图片)
            </p>
            <div style="margin-left: 130px; margin-top: 20px">
              <el-upload
                :disabled="disNo"
                :action="httpurl + '/api/fileUpload'"
                list-type="picture-card"
                :file-list="form.BannerImg"
                :limit="5"
                name="file"
                accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :before-upload="beforeAvatarUpload"
                :on-success="success"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </div>
          </div>
          <div class="foot">
            <el-button type="primary" @click="submit" :loading="requestBool"
              >完成</el-button
            >
            <el-button @click="result">取消</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      httpurl: this.GLOBAL.httpurl,
      enable: [],
      orderCode: "",
      requestBool: false, // 节流操作
      form: {
        BannerImg: [],
        payerName: "",
        payerPhone: "", //联系人电话
      },
      payerName: "", //付款人姓名
      dialogVisible: false,
      relus: {
        payerName: [
          { required: true, message: "请输入打款人姓名", trigger: "blur" },
        ],
        payerPhone: [
          { required: true, message: "请输入打款电话", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.orderCode = this.$route.query.orderCode;
    let set = this.$route.query.set;
    this.getData();
  },
  methods: {
    // 上传图片之前
    beforeAvatarUpload(file) {
      let newName = file.name.substring(file.name.lastIndexOf("."));
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/jpg";
      if (!isJPG) {
        layer.open({
          content: "上传预览图片只能是 jpg、jpeg、png 格式!",
          skin: "msg",
          time: 2,
        });
        return false;
      }
    },

    success(res, file, fileList) {
      // 这里是element的上传地址，对应的name,url,自己打印fileList对照
      this.form.BannerImg.push({ url: res.data.filePath });
    },
    // 删除图片
    handleRemove(res, file, fileList) {
      let picUrl = "";
      // 获取删除的url的值
      if (this.orderCode) {
        picUrl = res.url;
      } else {
        picUrl = res.response.data.filePath;
      }
      for (var i = 0; i < this.form.BannerImg.length; i++) {
        if (this.form.BannerImg[i].url == picUrl) {
          this.form.BannerImg.splice(i, 1); //删除下标为i的元素
          return this.form.BannerImg;
        }
      }
    },
    // 预览图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 回显数据
    getData() {
      axios
        .post("api/direct/getPayment", { orderCode: this.orderCode })
        .then((res) => {
          console.log("获取的回显的数据");
          console.log(res);
          this.form.BannerImg = res.data.data.payImgList;
          this.form.payerName = res.data.data.payerName;
          this.form.payerPhone = res.data.data.payerPhone;
        })
        .catch((err) => {});
    },

    // 取消 返回上一个页面
    result() {
      if (this.$route.query.set == "5") {
        this.$router.push({
          name: "createOrder",
          query: {
            orderCode: this.orderCode,
            back: "001",
            disBool: "f",
          },
        });
      } else {
        this.$router.push({
          name: "purchase",
        });
      }
    },
    // 点击完成
    submit() {
      var phone = this.form.payerPhone;
      if (false) {
        layer.open({
          content: "手机号输入有误",
          skin: "msg",
          time: 2, //2秒后自动关闭
        });
      } else {
        if (
          this.form.payerName != "" &&
          this.form.payerPhone != "" &&
          this.form.BannerImg.length >= 1
        ) {
          this.requestBool = true;
          let data = {};
          data.payerName = this.form.payerName;
          data.payImgList = this.form.BannerImg;
          data.payerPhone = this.form.payerPhone;
          data.orderCode = this.orderCode;
          axios
            .post("api/direct/payment", data)
            .then((res) => {
              if (this.$route.query.set == "5") {
                layer.open({
                  content: res.data.msg,
                  skin: "msg",
                  time: 2, //2秒后自动关闭
                });
                setTimeout(() => {
                  this.$router.push({
                    name: "createOrder",
                    query: {
                      orderCode: this.orderCode,
                      back: "001",
                      disBool: "f",
                    },
                  });
                }, 1000);
              } else {
                layer.open({
                  content: res.data.msg,
                  skin: "msg",
                  time: 2, //1秒后自动关闭
                });
                setTimeout(() => {
                  this.$router.push({
                    name: "purchase",
                  });
                }, 1000);
              }
              this.requestBool = false;
            })
            .catch((err) => {
              console.log("失败");
              console.log(err);
              layer.open({
                content: "网络连接超时，请稍后再试",
                skin: "msg",
                time: 2, //1秒后自动关闭
              });
              this.requestBool = false;
            });
        } else {
          layer.open({
            content: "数据都为必填",
            skin: "msg",
            time: 2, //1秒后自动关闭
          });
        }
      }
    },
  },
};
</script>
<style scoped>
.con {
  position: relative;
}
.basicInfo {
  width: calc(100% - 80px);
  margin: 20px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  padding-left: 20px;
  background: #f9fafc;
}
.el-form-item {
  width: calc(100% - 80px);
}
.imges {
  width: calc(100% - 80px);
}
.foot {
  float: left;
  margin-top: 50px;
  margin-left: 40%;
  margin-bottom: 20px;
}
</style>
